<template>
	<view>
		<view class="container">
			<cu-custom bgColor="bg-gradual-orange" :isBack="true">
				<block slot="content">商家入驻</block>
			</cu-custom>
			<!-- <headerView :title='title' :backBtn="true"></headerView> -->

			<view class="content">
				<!-- 商家头像 -->
				<view class="item shop-header">
					<view class="shop-left-info">
						<view class="shop-title">商家头像（200*200）</view>
						<view class="shop-info">可上传店铺照片或LOGO</view>
					</view>
					<view class="shop-right-upload">
						<view class="image-wrapper">
							<image @click="chooseAvatarImage" class="upload-img"
								:src="form.logo || '/static/iconupload.png'" mode=""></image>
							<view v-if="form.logo" @click="deleteAvatarImage" class="delete-btn">X</view>
						</view>
					</view>
				</view>
				<view class="item shop-header">
					<view class="shop-left-info">
						<view class="shop-title">门面照</view>
						<view class="shop-info">可上传门面照</view>
					</view>
					<view class="shop-right-upload">
						<view class="image-wrapper">
							<image @click="chooseIndoorImage" class="upload-img"
								:src="form.indoor_pic || '/static/iconupload.png'" mode=""></image>
							<view v-if="form.indoor_pic" @click="deleteIndoorImage" class="delete-btn">X</view>
						</view>
					</view>
				</view>

				<!-- 商家轮播图 -->
				<view class="item shop-banner">
					<view class="flex-sb">
						<view>店内以及商品展示（750*340）</view>
						<view class="select-count">已选择{{imgList.length}}张</view>
					</view>
					<view class="banner-upload">
						<view v-for="(image, index) in imgList" :key="index" class="image-wrapper">
							<image class="upload-img" :src="image" mode=""></image>
							<view @click="deleteBannerImage(index)" class="delete-btn">X</view>
						</view>
						<image v-if="imgList.length < 8" @click="chooseBannerImages" class="upload-img"
							:src="'/static/iconupload.png'" mode=""></image>
					</view>
				</view>

				<!-- 商家介绍 -->
				<view class="item shop-information">
					<view class="info-textarea">
						<textarea v-model="form.reason" placeholder="请输入商家介绍"></textarea>
					</view>
					<!-- <view class="info">
						<view class="flex-sb">
							<view></view>
							<view class="select-count">已选择{{shopInfoImages.length}}张</view>
						</view>
						<view class="info-upload">
							<view v-for="(image, index) in shopInfoImages" :key="index" class="image-wrapper">
								<image class="upload-img" :src="image" mode=""></image>
								<view @click="deleteShopInfoImage(index)" class="delete-btn">X</view>
							</view>
							<image v-if="shopInfoImages.length < 5" @click="chooseShopInfoImages" class="upload-img"
								:src="'/static/iconupload.png'" mode=""></image>
						</view>
					</view> -->
				</view>

				<!-- 详细信息 -->
				<view class="item shop-content">
					<view class="content-item">
						<view class="content-name">商家简称</view>
						<view class="">
							<input v-model="form.title" type="text" placeholder="请输入商家名称" />
						</view>
					</view>
					<view class="content-item">
						<view class="content-name">入驻类型</view>
						<view class="">
							<input v-model="type.name" @click="changeType" disabled="disabled"
								placeholder="请选择入驻分类"></input>
						</view>
						<text class="cuIcon-question" @click="checkExplain"></text>
					</view>
					<view class="content-item">
						<view class="content-name">拓店员UID</view>
						<view class="">
							<input v-model="form.agent_uid" type="text" placeholder="请输入拓店员UID" />
						</view>
					</view>
					<view class="content-item">
						<view class="content-name">商家折扣</view>
						<view class="">
							<input v-model="form.discount" class="input-w" type="text" placeholder="请输入商家的折扣" />
						</view>
						<text class='text-black'>%</text>
					</view>
					<view class="content-item">
						<view class="content-name">
							联系方式
						</view>
						<view class="">
							<input v-model="form.mobile" type="text" placeholder="请输入手机号码" />
						</view>
						<!-- <view class="getCode" :disabled="isCountingDown" @click="startCountdown">
							{{ countdown > 0 ? countdown + 's' : '验证码' }}
						</view> -->
					</view>

					<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->

					<!-- <view class="content-item">
						<view class="content-name">
							所在地区
						</view>
						<view class="">
							<picker mode="region" :disabled="disabled" @change="RegionChange" v-model="form.region">
								<view class="picker" style="text-align: left;">
									{{form.region[0]}}，{{form.region[1]}}，{{form.region[2]}}
								</view>
							</picker>
						</view>

					</view> -->

					<!-- #endif -->

					<view class="content-item" v-if="isdatashow">
						<view class="content-name">
							所在地区
						</view>
						<view class="diqu" >
							<uni-data-picker 
							popup-title="请选择城市" 
							style="font-size: 26rpx;color:#333;"
							:map="{text:'label',value:'value'}	" 
							:localdata="localData"
							 v-model="form.region"
							@change="handleChangeRegion"
							 @nodeclick="onnodeclick"
							:border="false"
							>
							<text v-if="form.region.length == 0">请选择城市</text>
							</uni-data-picker>
						</view>

					</view>
					<view class="content-item">
						<view class="content-name">
							具体位置
						</view>
						<view class="">
							<input type="text" v-model="form.address" placeholder="输入地址或点击地图选择" />
						</view>
						<image class="mapSelect" @click="chooseLocation"
							src="https://app.yycjkb.cn/index/fujiajia/coordinates_fill.png" mode=""></image>
					</view>
					<view class="radio">
						<view class="login-input-radio">
							<image v-if="radioJduge" class="login-radio" @click="radioJduge = false"
								src="https://app.yycjkb.cn/index/fujiajia/1509.png" mode="">
							</image>
							<image v-else class="login-radio" @click="radioJduge = true"
								src="https://app.yycjkb.cn/index/fujiajia/15029.png" mode="">
							</image>
						</view>
						<view class="">
							勾选代表同意付加加的<text>《用户协议》</text>
						</view>
					</view>
					<view class="login-form-btn" @click="submit">
						申请入驻
					</view>
				</view>

			</view>

			<!-- 底部tabbar -->
			<!-- <tabBar :selectIndex="selectIndex"></tabBar> -->
		</view>
	</view>
</template>

<script>
	import headerView from "../../components/header/header.vue"
	import tabBar from "../../components/tabBar/index.vue";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		upload
	} from "@/common/upload.js";
	import shop from '@/api/shop';
	import qqMap from '@/plugins/qqmap-wx-jssdk.min.js';
	import yhdslplace from '@/components/yhdsl-place/yhdsl-place.vue';

	export default {
		components: {
			tabBar,
			headerView,
			yhdslplace
		},
		data() {
			return {
				place: '',
				title: "商家入驻",
				selectIndex: 2,
				form: {
					title: '',
					bind_uid: '',
					logo: '',
					agent_uid: '',
					discount: '',
					reason: '',
					region: ['','',''],
					indoor_pic: '',
					address: '',
					lng: '',
					lat: '',
					albumInfo: '',
					mobile: '',
					type: '',
					rebate: '',
					position: 'boss',
					detail_address: ''
				},
				imgList: [],
				shopInfoImages: [],
				countdown: 0,
				isCountingDown: false,
				radioJduge: true,
				locationAddress: "",
				type: [],
				typeList: [],
				itemList: [],
				loading: false,
				items: [{
					name: '自动审核通道(推荐)',
					value: 1
				}, {
					name: '人工审核通道',
					value: 0
				}],
				current: 0,
				auto: false,
				message: '',
				isdatashow:false,
				localData:[]
			}
		},
		computed: {
			...mapState(['userLocation', 'userInfo', 'outPutUid']),
		},
		onLoad() {
			if (this.outPutUid != undefined && this.outPutUid) {
				this.form.agent_uid = this.outPutUid;
			}
			this.form.bind_uid = this.userInfo.id;
			this.form.agent_uid = this.userInfo.referrer;
			this.loadInfo();
			this.getTCitys();
			this.getTypes();
		},
		methods: {
			// 地区
			async getTCitys() {
				let res = await shop.getCitys({});
				if (res.code == 1) {
					this.isdatashow = true
					
					this.localData = this.getOptions(res.data);
				} else {
					console.log(res);
				}
			},
						
			onnodeclick(e) {
				let that = this
			},
			
			getOptions(regions) {
				let options = [];
				for (let index in regions) {
					let item = regions[index];
					let children = item.children;
					let optionItem = {
						value: item.id,
						label: item.name
					};
					if (children) {
						optionItem.children = this.getOptions(children);
					}
					options.push(optionItem);
				}
				return options;
			},
			//当uni-data-picker发生改变的时候
			 handleChangeRegion(e){
				 let options = [];
				 for (let index in e.detail.value) {
					let item = e.detail.value[index].text;
					options.push(item);
				 }
				 this.form.region = options.join(',')
				
			},
					
			checkExplain() {
				uni.navigateTo({
					url: './agreement',
				});
			},
			changeType() {
				if (this.itemList.length < 1) {
					return false;
				}
				let itemList = this.itemList;
				let _this = this;
				uni.showActionSheet({
					itemList: itemList,
					success: function(res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						_this.form.rebate = _this.typeList[res.tapIndex].id;
						_this.type = _this.typeList[res.tapIndex];
						if (res.tapIndex == 1) {
							_this.typeChoose = false;
						} else {
							_this.typeChoose = true;
						}
					},
					fail: function(res) {}
				});
			},
			change(val) {
				console.log(val.data);
				this.form.region = val.data;

				this.place = val.data.join(',');
			},
			RegionChange(e) {
				if (this.loading || this.disabled) {
					return;
				}
				this.form.region = e.detail.value;
			},
			async getTypes() {
				let res = await shop.getType({});
				if (res.code == 1) {
					this.type = res.data[0];
					this.typeList = res.data;
					this.form.rebate = this.type.id;
					let itemList = [];
					for (let i = 0; i < this.typeList.length; i++) {
						itemList.push(this.typeList[i].name);
					}
					this.itemList = itemList;
				} else {
					console.log(res);
				}
			},
			async loadInfo() {
				await this.$store.dispatch('getLocation');
				this.form.lng = this.userLocation.longitude;
				this.form.lat = this.userLocation.latitude;
			},
			chooseAvatarImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						upload(res.tempFilePaths[0]).then(uploadRes => {
							if (uploadRes.code == 0) {
								this.toast(uploadRes.msg);
								return;
							}
							this.form.logo = uploadRes.fullurl;
						});
					}
				});
			},
			deleteAvatarImage() {
				this.form.logo = '';
			},
			chooseIndoorImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						upload(res.tempFilePaths[0]).then(uploadRes => {
							if (uploadRes.code == 0) {
								this.toast(uploadRes.msg);
								return;
							}
							this.form.indoor_pic = uploadRes.fullurl;
						});
					}
				});
			},
			deleteIndoorImage() {
				this.form.indoor_pic = '';
			},
			chooseBannerImages() {
				const remainingCount = 8 - this.imgList.length;
				uni.chooseImage({
					count: remainingCount,
					success: (res) => {
						res.tempFilePaths.forEach(filePath => {
							upload(filePath).then(uploadRes => {
								if (uploadRes.code == 0) {
									this.toast(uploadRes.msg);
									return;
								}
								this.imgList.push(uploadRes.fullurl);
							});
						});
					}
				});
			},
			deleteBannerImage(index) {
				this.imgList.splice(index, 1);
			},
			chooseShopInfoImages() {
				const remainingCount = 5 - this.shopInfoImages.length;
				uni.chooseImage({
					count: remainingCount,
					success: (res) => {
						res.tempFilePaths.forEach(filePath => {
							upload(filePath).then(uploadRes => {
								if (uploadRes.code == 0) {
									this.toast(uploadRes.msg);
									return;
								}
								this.shopInfoImages.push(uploadRes.fullurl);
							});
						});
					}
				});
			},
			deleteShopInfoImage(index) {
				this.shopInfoImages.splice(index, 1);
			},
			chooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						this.form.address = res.name;
						this.form.lat = res.latitude;
						this.form.lng = res.longitude;
					}
				});
			},
			async submit() {
				this.form.albumInfo = this.imgList.join(",");
				this.form.detail_address = this.form.address;
				const res = await shop.apply(this.form);
				if (res.code == 1) {
					uni.showToast({
						title: '提交成功，等待审核'
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			},
			startCountdown() {
				if (this.isCountingDown) return;
				this.countdown = 60;
				this.isCountingDown = true;
				const timer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(timer);
						this.isCountingDown = false;
					}
				}, 1000);
			}
		}
	}
</script>

<style lang="less" scoped>
	.flex-sb {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.container {
		// height: calc(100vh - 100rpx);
		padding-bottom: 100rpx;

		.content {
			width: 98%;
			margin: auto;

			.upload-img {
				width: 157rpx;
				height: 157rpx;
				cursor: pointer;
				margin-right: 10rpx;
			}

			.item {
				margin-top: 20rpx;
				border-radius: 10rpx;
				padding: 40rpx;
				background-color: #fff;
				font-size: 30rpx;
			}

			.shop-header {
				height: 243rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.shop-left-info {
					height: 100%;

					.shop-title {
						font-size: 30rpx;
						padding-bottom: 20rpx;
					}

					.shop-info {
						color: #3334;
					}
				}
			}

			.shop-banner {
				.banner-upload {
					padding-top: 20rpx;
				}

				.select-count {
					color: #3334;
				}
			}

			.shop-information {
				.info-textarea {
					border-bottom: 2rpx solid #3333;

					textarea {
						width: 100%;
						height: 170rpx;
					}
				}

				.info {
					margin-top: 20rpx;
					color: #3334;
				}
			}

			.shop-content {
				.content-name {
					width: 150rpx;
				}

				.content-item {
					position: relative;
					display: flex;
					align-items: center;
					padding: 30rpx 0;
					border-bottom: 2rpx solid #ebebeb;

					input {
						font-size: 28rpx;
						width: 100%;
					}

					.input-w {
						width: 120%;
					}

					.getCode {
						position: absolute;
						top: 50%;
						right: 0%;
						transform: translateY(-50%);
						padding: 10rpx 30rpx;
						border-radius: 10rpx;
						color: #fff;
						background: linear-gradient(90deg, rgba(254, 176, 122, 1) 35%, rgba(242, 171, 235, 1) 100%);
						cursor: pointer;

						&[disabled] {
							opacity: 0.5;
							cursor: not-allowed;
						}
					}
				}

				.mapSelect {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					right: 5%;
				}

				.radio {
					padding: 20rpx 0;
					padding-top: 40rpx;
					display: flex;
					align-items: center;
					color: #cccccc;

					.login-radio {
						vertical-align: middle;
						width: 33rpx;
						margin-right: 10rpx;
						height: 33rpx;
					}

					text {
						color: rgb(250, 158, 73);
					}
				}

				.login-form-btn {
					width: 100%;
					background: linear-gradient(90deg, rgba(254, 176, 122, 1) 35%, rgba(242, 171, 235, 1) 100%);
					justify-content: center;
					color: #fff;
					border-radius: 20rpx;
					height: 96rpx;
					display: flex;
					align-items: center;
					margin: 20rpx 0;
				}
			}

			.image-wrapper {
				position: relative;
				display: inline-block;
			}

			.delete-btn {
				position: absolute;
				top: 0;
				right: 10rpx;
				background-color: rgba(0, 0, 0, 0.5);
				color: white;
				width: 30rpx;
				height: 30rpx;
				text-align: center;
				line-height: 30rpx;
				border-radius: 50%;
				cursor: pointer;
			}
		}
	}
	.uni-data-picker-placeholder {
	  /* 覆盖placeholder样式 */
	  color: #f00 !important;
	}
</style>